<template>
  <div class="page-container">
    <div class="search-box d-flex a-center">
      <span class="search-label m-r10">关键字</span>
      <el-input class="search-input" v-model="searchValue" clearable placeholder="请输入合同模板名称"></el-input>
      <el-button color="#ff7b50" class="search-query-btn m-l10" @click="onSearchBtn">搜索</el-button>
    </div>
    <public-table
        :header-cell-style="{'background':'#F5F5F5'}"
        :index="false"
        border
        :page="page"
        :tableData="tableData"
        :tableOption.sync="tableOption"
        @page-change="onPageChange"
    >
      <template #buttons="scope">
        <el-button @click="toXinZuForm(scope.row)">新租</el-button>
      </template>
    </public-table>
  </div>
</template>

<script setup>
import { ref,onMounted,reactive } from "vue";
import {contractApi} from "@/api/coordination";
import {useRouter} from "vue-router";
import PublicTable from "@/components/PublicTable";

const searchValue = ref('');
const page = reactive({
  total: 0,
  current: 1,
  size: 10
});
const tableData = ref([]);

const tableOption = ref([
  { label: '合同模板名称', prop: 'templateName' },
  { label: '协议类型', prop: 'protocolType',formatter:(val,row)=>{
      let arr = ['','资产','租赁'];
      return arr[val] || '-';
    } },
  { label: '业务场景', prop: 'contractType',formatter:(val,row)=>{
      let arr = ['','新签','续签','退租'];
      return arr[val] || '-';
    } },
  { label: '物业类型',prop: 'propertyType',formatter:(val,row)=>{
      let arr = ['','综合体','农贸市场','商铺'];
      return arr[val] || '-';
    }},
  { label: '创建时间', prop: 'createTime'},
  {
    label: '操作',
    slot: true,
    width: 300,
    overHidden:false,
    slotName: 'buttons',
      fixed: "right"
  }
]);


// 分页查询合同模板列表
const getContractTemplatesPage = (params) => {
  contractApi.getContractTemplatesPage(params).then(res=>{
    page.total = res.data.totalSize;
    tableData.value = res.data.content;
  });
}

// 分页
const onPageChange = (val) => {
  page.current = val.page;
  page.size = val.limit;

  getContractTemplatesPage({
    pageNum:val.page,
    pageSize:val.limit,
    param:{
      templateName:searchValue.value || ''
    }
  });
}

// 搜索
const onSearchBtn = () => {
  getContractTemplatesPage({
    pageNum:1,
    pageSize:10,
    param:{
      templateName:searchValue.value || ''
    }
  });
}

const router = useRouter();
// 跳转创建新租表单页面
const toXinZuForm = (row) => {
  console.log("🚀 ~ toXinZuForm ~ row:", row)
  router.push({ path: `/asset/collaborativeApproval/createXinZhuForm/createForm/${row.templateUrlKey}/${row.contractTemplateId}` });
}

onMounted(()=>{
  getContractTemplatesPage({
    pageNum:1,
    pageSize:10
  });
});
</script>

<style lang="scss" scoped>
.page-container{
  .search-box{
    margin-bottom: 12px;
    .search-label{
      font-weight: 600;
    }
    .search-input{
      width: 25%;
    }
    .search-query-btn{
      color: #FFFFFF;
    }
  }
}
</style>
